<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>script操作dom对象</title>
		<script type="text/javascript">
			//在JavaScript中使用function关键字定义函数（方法）
			//js中的函数不会自动运行，需要和空间的时间动作进行绑定，通过时间的触发来执行该函数的内容

			var checkMe = function() {
				console.info("hello world");
				document.getElementById("txtName").value = "小李";
				var strName = document.getElementById("txtName").value;
				console.info(strName + "是数字吗？" + isNaN(strName));
			}

			/*
			 * 显示当前时间
			 */
			function showTime() {
				//创建一个事件对象。获取当前时间
				var date = new Date();
				console.info(date.toLocaleTimeString());
				//将当前时间内容写到指定的html控件中
				document.getElementById('spanTime').innerHTML = date.toLocaleTimeString().fontcolor("Red");
				//计时触发函数（指定多长时间执行一次指定代码）
				//每隔950毫秒调用一次showTime函数
				setTimeout('showTime()', 950)
			}

			/*
			 * js构建对象
			 */
			function doTest() {
				//1、直接创建对象的方式
				//js中定义对象
				//定义一个学生类
				var stu = new Object();
				//设定对象的行为
				stu.stuName = '小李';
				stu.stuAge = 20;
				stu.stuSex = '男';
				//定义对象的行为
				stu.doStudying = function() {
						console.info("stu:name--" + stu.stuName);
					}
					//调用stu类得行为方法
				stu.doStudying();

				/**************************************************/
				//2.对象初始化器方式
				var user = {
						//属性
						name: 'Kobe',
						age: 37,
						//行为方法
						getName: function() {
							return this.name;
						},
						display: function() {
							console.info('我是' + this.getName() + ',今年' + this.age + '岁。')
						}
					}
					//调用类对象的行为方法
				user.display();

				/**************************************************/
				//3.构造函数方式
				function Person(name, age) {
					this.name = name;
					this.age = age;
					this.speak = speak;
				}
				//该部分可以放在构造函数内部进行定义
				function speak() {
					console.info(this.name + "is" + this.age + "years old")
				}

				var person1 = new Person("Kobe", 37);
				var person2 = new Person("Jack", 18);
				//调用实例对象的方法
				person1.speak();
				/**********************************************/
				//prototype原型方式
				function Person2() {
					Person2.prototype.name = "Kobe";
					Person2.prototype.age = 37;
					Person2.prototype.speak = function() {
						console.info(this.name + " is " + this.age + " years old")
					}
				}
					var person1 = new Person2();
					person1.speak();
			}
		</script>
	</head>

	<!--<body onload="showTime();">-->

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
			<form action="#" method="get">
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
					<tbody>
						<tr>
							<td>姓名</td>
							<td><input type="text" id="txtName" name="txtName" /></td>
						</tr>
						<tr>
							<td>登录密码</td>
							<td><input readonly="readonly" type="password" id="txtPsw" name="txtPsw" /></td>
						</tr>
						<tr>
							<td>性别</td>
							<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex" checked="checked" name="radSex" /> 女
								<input type="radio" id="radSex2" name="radSex" />男
								<input type="radio" id="radSex3" name="radSex" />未知</td>
						</tr>

						<tr>
							<td>个人简历</td>
							<td><input type="file" id="fileResume" name="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" id="chHobby1" name="chHobby" />游泳
								<input type="checkbox" id="chHobby2" name="chHobby" />爬山
								<input type="checkbox" id="chHobby3" checked name="chHobby" />dota
								<input type="checkbox" id="chHobby4" name="chHobby" />coding
								<input type="checkbox" id="chHobby5" name="chHobby" />testing</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td>
								<select id="selectXL" name="selectXL" style="width: 120px;">
									<option value=""></option>
									<option value="DZ">大专</option>
									<option value="BK" selected>本科</option>
									<option value="SS">硕士</option>
									<option value="BS">博士</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td>当前时间:</td>
							<td><span id="spanTime"></span></td>
						</tr>
						<tr>
							<td><input type="submit" value="提交" id="btnSubmit" onclick="doTest();" /></td>
							<td><input type="reset" value="重置" id="btnSubmit" /></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>